/* 
// 模拟Fiber架构之前react的实现
import react15 from "./react15";
react15(element, container); 
*/

/* // 模拟fiber的schedule调度
import mockFiber from "./demo-schedule";
mockFiber()  */
import React from "./react";
import ReactDOM from "./react-dom";
class ClassCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { number: 0 };
  }
  clickHandler = (event) => {
    console.log("onclick", event);
    this.setState((state) => ({ number: state.number + 1 }));
  };
  render() {
    return (
      <div id="counter">
        <span>{this.state.number}</span>
        <button onClick={this.clickHandler}>click</button>
      </div>
    );
  }
}
function reducer(state, action) {
  switch (action.type) {
    case "add":
      return { count: state.count + 1 };
    default:
      return state;
  }
}
function FnCounter(props) {
  const [countstate, dispatch] = React.useReducer(reducer, { count: 0 });
  const [countstate2, dispatch2] = React.useReducer(reducer, { count: 9 });
  const [num, setNum] = React.useState({ count: 0 });
  return (
    <div id="counter">
      <span>
        {countstate.count}
        {countstate2.count}
      </span>
      <button onClick={() => dispatch({ type: "add" })}> +1 </button>
      <button onClick={() => dispatch2({ type: "add" })}> +1 </button>
      <div>{num.count}</div>
      <button onClick={() => setNum({ num: num.count++ })}> num+ </button>
    </div>
  );
}
let container = document.getElementById("root");
let style = { border: "2px solid red", margin: "5px", padding: "0 5px" };
// const PLACEMENT = "PLACEMENT";
// console.log(element);
let element1 = (
  <div id="A1" style={style}>A1
    <div id="B1" style={style}>B1
        <div id="C1" style={style}>C1</div>
        <div id="C2" style={style}>C2</div>
    </div>
    <div id="B2" style={style}>B2</div>
  </div>
);
ReactDOM.render(element1, container);
let render2 = document.getElementById("render2");
let render3 = document.getElementById("render3");
render2.addEventListener("click", () => {
  let element2 = (
    <div id="A1-new" style={style}>
      A1-new
      <div id="B1-new" style={style}>
        B1-new
        <div id="C1-new" style={style}>
          C1-new
        </div>
        <div id="C2-new" style={style}>
          C2-new
        </div>
      </div>
      <div id="B2-new" style={style}>
        B2-new
      </div>
      <div id="B3" style={style}>
        B3
      </div>
    </div>
  );
  ReactDOM.render(element2, container);
});
render3.addEventListener("click", () => {
  let element3 = (
    <div id="A1-new2" style={style}>
      A1-new2
      <div id="B1-new2" style={style}>
        B1-new
        <div id="C1-new2" style={style}>
          C1-new2
        </div>
        <div id="C2-new2" style={style}>
          C2-new2
        </div>
      </div>
      <div id="B2-new2" style={style}>
        B2-new2
      </div>
    </div>
  );
  ReactDOM.render(element3, container);
});
// ReactDOM.render(<FnCounter />, document.getElementById("rootFn"));
